<template>
    <div>
       <div class="container">
           <div class="wait-box">
                
                <div class="wait-center">
                    <div class="wait-center-box">
                        <img :src="timer_img" alt="" class="wait-center-img">
                    </div>
                    <div class="wait-center-context">
                        <p>数据查询中</p>
                        <p>请在完成发票数据采集后3~10分钟刷新本页面</p>
                    </div>
                </div>
                <div class="wait-bottom">
                    <p>
                        <span>申请人：</span>
                        <span>{{name}}</span>
                    </p>
                    <p>
                        <span>手机号：</span>
                        <span>{{phone}}</span>
                    </p>
                    <p>
                        <span>企业名称/税号：</span>
                        <span>{{einName}}</span>
                    </p>
                </div>
                <div class="wait-top" @click="refresh_btn">
                    <div>
                        <span class="wait-top-span">刷新</span>
                        <img :src="refresh_img" alt="" class="wait-top-img">
                    </div>
                </div>
                <div class="wait-bottom-progress">
                    <p>请不要关闭当前页面，再次进入需要重新填写姓名手机号等信息！</p>
                </div>
           </div>
       </div>
    </div>
</template>

<script>
import $                                    from 'jquery'
import { Indicator,Toast,MessageBox }       from 'mint-ui'
import ApiConfig                            from '../config/api.config'

export default {
    name: 'Waiting',
    data() {
        return {
            refresh_img:require('../assets/images/refresh_icon2x.png'),
            timer_img:require('../assets/images/timer_img2x.png'),
            name:'',//姓名
            phone:'',//电话号
            einName:'',//企业名称/税号
        }
    },

    mounted() {
        document.querySelector('body').setAttribute('style', 'background-color:#F0F0F0')
        if(this.$route.query.phone){
            this.phone=this.$route.query.phone
            this.name=this.$route.query.name
            this.einName=this.$route.query.einName
        }
    },
    methods:{
        //刷新
        refresh_btn(){
            this.CREDIT_REPORT = `${ApiConfig.CREDIT_REPORT}`;
            this.$axios.get(this.CREDIT_REPORT+this.einName)
            .then((res) => {
                // console.log(res.data.data)
                if(res.data.data =='SUCCESS'){
                    window.location.href="https://smewx.webank.com/mesp-wpm/rls/#/loginCredit/entry?channel=100_wb0007"
                }else{
                    location.reload();
                }
            })
            .catch(err => {
                // Toast({
                //     message: '请求失败，请退出重试！',
                // });
                this.toast('请求失败，请重试！')
            })  
        },
    }
}
</script>

<style lang="less" scoped>
.container{
    width: 100%;
    padding: 8px 9px 0 9px;
    box-sizing: border-box;
    .wait-box{
        width: 100%;
        // height: 372px;
        background-color: #fff;
        float: left;
        .wait-top{
            width: 73.30%;
            height: 40px;
            float: left;
            // margin-top: 52px;
            // background-color: red;
            margin: 52px 13.35% 0 13.35%;
            border: 1px solid #2529E8;
            display:flex;
            justify-content:center;
            align-items:center;
            .wait-top-img{
                display: inline-block;
                float: right;
                width: 24px;
                height: 24px;
                margin-right: 8px;
            }
            .wait-top-span{
                display: inline-block;
                float: right;
                height: 24px;
                line-height: 24px;
                margin-right: 16px;
                font-size: 14px;
                color:#2529E8;
                font-family: PingFangSC-Regular;
                letter-spacing: -0.36px;
            }
        }
        .wait-center{
            width: 100%;
            float: left;
            .wait-center-box{
                width: 100%;
                height: 60px;
                line-height: 60px;
                margin-top: 68px;
                text-align: center;
                float: left;
                .wait-center-img{
                    display: inline-block;
                    width: 60px;
                    height: 100%;
                    border-radius: 50%;
                    overflow: hidden;
                }
            }
            .wait-center-context{
                width: 100%;
                height: 24px;
                line-height: 24px;
                text-align: center;
                margin-top: 16px;
                float: left;
            }
            .wait-center-context>p:first-child{
                font-size: 18px;
                color:#333;
                font-family: PingFangSC-Regular;
                letter-spacing: -0.45px;
                margin-bottom: 4px;
            }
            .wait-center-context>p:last-child{
                font-size: 12px;
                color:#999999;
                font-family: PingFangSC-Regular;
                letter-spacing: -0.3px;
            }
        }
        .wait-bottom{
            width: 100%;
            padding: 0 39px 0 41px;
            box-sizing: border-box;
            margin-top: 48px;
            float: left;
        }
        .wait-bottom>p{
            width: 100%;
            height: 20px;
            line-height: 20px;
            float: left;
            margin-top: 16px;
        }
        .wait-bottom>p>span:first-child{
            display: inline-block;
            height: 20px;
            line-height: 20px;
            float: left;
            font-size: 14px;
            color:#999999;
            font-family: PingFangSC-Regular;
            letter-spacing: -0.36px;
        }
        .wait-bottom>p>span:last-child{
            display: inline-block;
            height: 20px;
            line-height: 20px;
            float: right;
            font-size: 14px;
            color:#999999;
            font-family: PingFangSC-Regular;
            letter-spacing: -0.36px;
        }
        .wait-bottom-progress{
            width: 100%;
            margin-top: 16px;
            margin-bottom: 32px;
            float: left;
        }
        .wait-bottom-progress>p{
            width: 100%;
            height: 24px;
            line-height: 24px;
            text-align: center;
            float: left;
            font-size: 12px;
            color:#999999;
            font-family: PingFangSC-Regular;
            letter-spacing: -0.3px;
        }
    }
}
</style>
